prettier是什麼?

prettier可以讓我們的code樣式風格保持一致，像是空格是幾格或有沒有分號等的程式碼樣式風格。

安裝

npm install --save-dev --save-exact prettier

--save-exact這個參數可以鎖定版本。像是3.0.3不是^3.0.3。

如需要客製化風格可以在.prettierrc.json檔案裡編寫

{
  "tabWidth": 2, //  tab 2格
  "semi": true,  // 結尾有分號
  "singleQuote": true // 單引號
}

如果要排除特定檔案加入統一風格格式，在.prettierignore檔加入檔案

build
dist

使用

npx prettier [file|dir] --write

輸入這段指令會自動將code修正為prettier預設的樣式風格

prettier vscode套件

跟eslint一樣，如果每次檢查都要再輸入指令，那也太麻煩了吧!

一樣的我們可以裝vscode的extension Prettier - Code formatter來方便我們使用prettier

下載完extension後再更新vscode的設定

{
	// prettier的設定
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
	// eslint的設定
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

設定完後每次存檔就會幫你格式化你的code了!

prettier和eslint有衝突

我們先前設定了airbnb的eslint style，現在又加入prettier，當我們按下存檔後畫面會一閃，然後code還是原本的樣子。

這是因為eslint除了檢查程式有沒有錯誤外，也有提供一些樣式風格的rules，一個最容易看的到例子，airbnb的eslint style會有分號，prettier預設style是沒有分號，所以這就會這樣變成沒分號後又變成有分號又跳回沒分號，一閃一閃亮晶晶。

prettier官網也有提到這個問題，可以安裝**eslint-config-prettier**這個套件來解決兩者衝突的問題。

這個套件會把衝突的樣式關掉，保留prettier的樣式。

• 安裝

  npm install --save-dev eslint-config-prettier

• 更改.eslintrc extends(確保prettier放在最後一個，才可以覆蓋掉其他的config規則)

{
  "extends": [
		"some-other-config-you-use",
		"airbnb",
    "airbnb/hooks",
		"airbnb-typescript",
    "prettier" // 這裡
  ]
}

簡單兩步驟就可以解決衝突了!

個人使用選擇

我平常不太會修改prettier的預設樣式，主要習慣就是2個空格、要有分號和單引號。
你是習慣用什麼樣是，歡迎分享討論。

{
	"tabWidth": 2,
	"semi": true,
	"singleQuote": true
}

參考

https://prettier.io/docs/en/install

https://prettier.io/docs/en/cli.html

https://prettier.io/docs/en/integrating-with-linters.html